<%@ page language="java" contentType="text/html; charset=UTF-8"
                pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试restful页面</title>
</head>
<script type="text/javascript" src="<c:url value='/js/jquery-1.6.4.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/jquery.serializejson.min.js'/>"></script>
<body>
        <h1>获取一个</h1>
        <input type="button" value="测试restful获取一个"  onclick="getOne(3)"/><br/>
        <script type="text/javascript">
            var path="<c:url value='/'/>";
            function getOne(id){
                   $.ajax({
                       type:"GET",
                       data:null,
                       url:path+"restful_exams/"+id+".action",
                       dataType:"json",
                       async:true,
                       success:function(data){
                           alert(data);
                           alert(data.obj.ename+"::"+data.obj.eid+":"+data.obj.etimeStr);
                       }
                   });
            }
        </script>
        <hr/>
        <h1>获取所有</h1>
        <input type="button" value="测试restful获取所有"  onclick="getAll()"/><br/>
        <script type="text/javascript">
            function getAll(){
                $.ajax({
                    type:"GET",
                    data:null,
                    url:path+"restful_exams.action",
                    dataType:"json",
                    async:true,
                    success:function(data){
                         for(var i=0;i<data.obj.length;i++){
                             alert(data.obj[i].ename+"::"+data.obj[i].eid);
                         }
                    }
                });
            }
        </script>
        <hr/>
        <h1>按条件查询：分页查询</h1>
        <form  id="form_getAllFenYe">
            起始索引：<input  type="text" name="startIndex"/><br/>
            每页记录数：<input  type="text" name="pageSize"/><br/>
            <input  type="button" value="分页查询"  onclick="getAllFenYe()"/>
        </form>
        <script type="text/javascript">
            function getAllFenYe(){
                //获取ename和etime
                var startIndex=$("input[name='startIndex']").val();
                var pageSize=$("input[name='pageSize']").val();
                //通过ajax请求action
                $.ajax({
                    data:null,  //
                    type:"GET",
                    dataType:"json",
                    url:path+"restful_exams/"+startIndex+"/"+pageSize+".action",
                    success:function(responseEntity){
                        alert(responseEntity.obj.length);
                    }
                });
            }
        </script>
        <hr/>
        <h1>添加一个：自己把表单 拼凑成json串</h1>
        <form id="tab_add1">
            考试名称：<input  type="text" name="ename"/><br/>
            考试时间：<input  type="text" name="etimeStr"  placeholder="格式：xxxx-xx-xx"/><br/>
            <input  type="button" value="添加一个:拼凑json"  onclick="addOne1()"/><br/>
        </form>
        <script type="text/javascript">
            function addOne1(){
                //通过ajax把form_add对应的数据封装成json串 通过post方式 提交给action
                var  ename=$("#tab_add1 input[name='ename']").val();
                var  etimeStr=$("#tab_add1 input[name='etimeStr']").val();
                 var  jsonData={"ename":ename,"etimeStr":etimeStr};
                 //通过ajax把json对象发送给action
                $.ajax({
                    data:JSON.stringify(jsonData),  //传递给java的必须时json串  不是json对象
                    contentType:"application/json",  //请求参数时json串时  添加请求头
                    type:"POST",
                    dataType:"json",
                    url:path+"restful_exams1.action",
                    success:function(responseEntity){
                        alert(responseEntity.message);
                    }
                });
            }
        </script>

        <hr/>
        <h1>添加一个：fromdate方法获取表单对应的formdata对象</h1>
        <form  id="form_add2">
            考试名称：<input  type="text" name="ename"/><br/>
            考试时间：<input  type="text" name="etimeStr"/><br/>
            <input  type="button" value="添加一个:fromdate方法"  onclick="addOne2()"/>
        </form>
        <script type="text/javascript">
            function addOne2(){
                  //获取表单对应的json对象串
                  var  jsonData2=new FormData($("#form_add2")[0]);
//                var  jsonData2=new FormData();
//                jsonData2.append("ename",$("#form_add2 input[name='ename']").val());
//                jsonData2.append("etimeStr",$("#form_add2 input[name='etimeStr']").val());
                //通过ajax把json对象发送给action
                $.ajax({
                    data:jsonData2,  //传递的时formdata对象
                    processData: false,//formdata对象不能设置请求头processData和contentType
                    contentType: false,
                    type:"POST",
                    dataType:"json",
                    url:path+"restful_exams2.action",
                    success:function(responseEntity){
                        alert(responseEntity.message);
                    }
                });
            }
        </script>

        <hr/>
        <h1>修改一个</h1>
        <form  id="form_update">
            考试编号：<input  type="text" name="eid"/><br/>
            考试新名称：<input  type="text" name="ename"/><br/>
            考试新时间：<input  type="text" name="etimeStr"  placeholder="格式：xxxx-xx-xx"/><br/>
            <input  type="button" value="修改一个"  onclick="updateOne1()"/>
        </form>
        <script type="text/javascript">
            function updateOne1(){
                //获取json串方法1  自己拼接
//                var ename=$("#form_update input[name='ename']").val();
//                var etimeStr=$("#form_update input[name='etimeStr']").val();
//                var eid=$("#form_update input[name='eid']").val();
//                var  jsonData={"ename":ename,"etimeStr":etimeStr,"eid":eid};
//                var  jsonStr=JSON.stringify(jsonData);//把json对象转换为json串
                //jquery.serializejson.min.js的：JSON.stringify($('#formDemo').serializeJSON())
                //获取json串方法2： 通过jquery.serializejson.min.js的serializeJSON方法
                var  jsonStr=JSON.stringify($('#form_update').serializeJSON());
                $.ajax({
                    data:jsonStr,//
                    contentType:"application/json",  //请求参数时json串时  添加请求头
                    type:"PUT",
                    dataType:"json",
                    url:path+"restful_exams.action",
                    success:function(responseEntity){
                        alert(responseEntity.message);
                    }
                });
            }
        </script>
        <hr/>
        <h1>删除一个</h1>
        <form  id="form_delete">
            考试编号：<input  type="text" name="eid"/><br/>
            <input  type="button" value="删除一个"  onclick="deleteOne()"/>
        </form>
        <script type="text/javascript">
            function deleteOne(){
                //获取ename和etime
                var eid=$("#form_delete input[name='eid']").val();
                //通过ajax请求action
                $.ajax({
                    data:null,//
                    type:"DELETE",
                    dataType:"json",
                    url:path+"restful_exams/"+eid+".action",
                    success:function(responseEntity){
                        alert(responseEntity.message);
                    }
                });
            }
        </script>

        <hr/>
        <h1>文件上传：fromdate方法获取表单对应的formdata对象</h1>
        <form  id="form_upload">
            考试名称：<input  type="text" name="ename"/><br/>
            考试时间：<input  type="text" name="etimeStr"/><br/>
            考试文档：<input  type="file" name="examText"/><br/>
            <input  type="button" value="文件上传"  onclick="uploadAdd()"/>
        </form>
        <script type="text/javascript">
            function uploadAdd(){
                //获取表单对应的json对象串
                var  jsonData3=new FormData($("#form_upload")[0]);
                $.ajax({
                    data:jsonData3,  //传递的时formdata对象
                    processData: false,//formdata对象不能设置请求头processData和contentType
                    contentType: false,
                    type:"POST",
                    dataType:"json",
                    url:path+"restful_exams3.action",
                    success:function(responseEntity){
                        alert(responseEntity.message);
                    }
                });
            }
        </script>

</body>
</html>